<template>
	<view class="info">
		<view class="con-wrapper">
			<view class="con-text">
				<view>
					<!-- <cx-input v-model="insQuantity" :height="160" @blur="onChange" /> -->
					<view class="quantity" @click="editQuantity">
						{{insQuantity}}
					</view>
					<view class="unitName">
						<text>{{unitName}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view>
				<text class="quantity">计价数：</text>
				<text>{{priceQuantity}}{{unitName}}</text>
			</view>
			<view>
				<text class="quantity">可发货数：</text>
				<text>{{canDeliverUseQuantity}}{{unitName}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "cx-scan-info",
		props: {
			unitName: {
				type: String,
				default: ""
			},
			quantity: {
				type: Number,
				default: 0
			},
			// 计价
			priceQuantity: {
				type: Number,
				default: 0
			},
			// 可发货
			canDeliverUseQuantity: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				insQuantity: 0,
			}
		},
		watch: {
			'quantity': {
				handler(val) {
					this.insQuantity = val
				},
				immediate: true
			}
		},
		methods: {
			editQuantity() {
				const nowTime = new Date().getTime();
				if (nowTime - this.clickTime < 350) {
					const _this = this
					uni.showModal({
						title: '编辑数量',
						showCancel: true,
						editable: true,
						placeholderText: '请输入数量',
						success: function(res) {
							const quantity = res.content
							if (res.confirm) {
								_this.handleChangeQuantity(quantity)
							}
						}
					})
					return
				}
				this.clickTime = new Date().getTime()
			},
			handleChangeQuantity(targetQuantity) {
				targetQuantity = Number(targetQuantity || 0)
				if (targetQuantity > Number(this.canDeliverUseQuantity)) {
					targetQuantity = Number(this.canDeliverUseQuantity)
				}
				this.insQuantity = targetQuantity
				this.$emit("on-change", targetQuantity)
				this.$emit("update:quantity", targetQuantity)
				this.$emit("update:priceQuantity", targetQuantity)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.info {
		background: #459aff;
		color: #fff;
		height: 460rpx;
		display: flex;
		flex-direction: column;
		box-shadow: 0 6px 6px rgba(0, 0, 0, .1);

		.con-wrapper {
			flex: 1;
			display: flex;
			align-items: center;
			text-align: center;

			.con-text {
				height: 100%;
				margin: 0 auto;
				display: flex;
				align-items: center;

				.quantity {
					font-size: 80px;
				}

				/deep/.cx-input {

					.view-input {
						height: 80px;
						font-size: 80px;
					}

					.real-input {
						height: 80px;
						text-align: center;
						font-size: 80px;
						color: #fff;
					}
				}

				.unitName {}
			}

		}

		.bottom {
			padding: 10px;
			background-color: #3f8eef;
			display: flex;
			justify-content: space-between;
		}
	}
</style>